import { CheckboxGroupField, CommonField } from "@/pages/OrderModule/common/components/CommonForm";
import { Form, Input, Spin } from "antd";
import { useEffect, useMemo, useState } from "react";
import { TagLabel } from "../TagLabel";
import Style from "./index.module.less";
import { GOODS_LABEL } from "@/views/utils/constant";

export const TagField = props => {
	const { fieldKey } = props;
	const [tagName, setTagName] = useState("");
	const [commitSearch, setCommitSearch] = useState("");

	const tagList = useMemo(() => {
		if (commitSearch) {
			return GOODS_LABEL.filter(item => item.name.includes(commitSearch)) || [];
		} else {
			return GOODS_LABEL || [];
		}
	}, [GOODS_LABEL, commitSearch]);

	return (
		<>
			<Form.Item>
				<CommonField
					Component={Input}
					props={{
						placeholder: "回车搜索",
						onChange: e => {
							setTagName(e.target.value);
						},
						onKeyDown: e => {
							if (e.key === "Enter") {
								setCommitSearch(tagName);
							}
						}
					}}
				/>
			</Form.Item>
			<Form.Item name={fieldKey}>
				<CommonField
					Component={CheckboxGroupField}
					props={{
						className: Style.orderTag_checkbox_wrap,
						numCol: 5,
						suffixAction: ["all"],
						title: {
							className: Style.orderTag_title,
							as: "s2",
							symbol: true,
							title: "选择商品标签"
						},
						options: tagList.map((item, key) => ({
							label: <TagLabel key={item.name} name={item.name}></TagLabel>,
							value: item.id
						}))
					}}
				/>
			</Form.Item>
		</>
	);
};
export default TagField;
